<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <include file="Public:resource"/>
    <title>停水登记</title>
</head>
<body>
<div class="container">
    <include file="Public:top" title="停水登记"/>
    <form id="stopForm">
        <div class="row" style="margin-top:20px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 align-to-input" align="left">
                用户号
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <input type="text" name="user-id" placeholder="请输入停水用户号" id="user-id">
            </div>
        </div>
        <div class="row" style="margin-top:20px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 align-to-input" align="left">
                停水类别
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <select name="stop-type" id="stop-type" class="select">
                    <foreach name="stoptype" item="type">
                        <option value="{$type.stoptypeid}">{$type.typename}</option>
                    </foreach>
                </select>
            </div>
        </div>

        <div class="row" style="margin-top:20px;">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 align-to-input" align="left">
                停水原因
            </div>
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                <textarea name="reason" placeholder="请输入停水原因" style="width:100%;" id="reason" rows="5"></textarea>
            </div>
        </div>

        <div class="row" style="margin-top: 20px;">
            <div class="col-xs-12 col-sm-12 col-mg-12 col-md-12">
                <div><input type="button" class="btn btn-lg btn-block jss-button"
                            onclick="onSubmit() " value="提交"/>
                </div>
            </div>
        </div>
    </form>
    <include file="Public:progress" hint="提交中..."/>
    <include file="Public:message"/>

</div>
<script>
    /**
     * 异步提交表单
     */
    function onSubmit() {
        if ($("#user-id").val() == '') {
            alert("请填写停水用户号!");
            return;
        }
        if ($("#reason").val() == '') {
            alert("请填写停水原因!");
            return;
        }
        showProgress();
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: "{:U('stopRegister')}",
            async :false,
            data: $("#stopForm").serialize(),
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success: function (json) {
                hideProgress();
                if (json.status == 'success') {
                    alert("用户号"+ $("#user-id").val() +"停水登记成功");
                    clearForm();
                } else {
                    alert(json.data.errmsg);
                }
            },
            error: function (msg) {
                alert("网络异常!");
                hideProgress();
            }
        });
    }
    //清空输入
    function clearForm() {
        $("#user-id").val('');
        $("#reason").val('');
    }
</script>
</body>
</html>